import React,{useEffect, useState } from 'react'
import {
    Button, Form, Input, TreeSelect,
    Select
} from 'antd';
import '../components.css'
import { Link, useLocation } from 'react-router-dom'
import RefundsService from '../../services/RefundsService';
import { CloseCircleOutlined, CaretUpOutlined, MailOutlined } from '@ant-design/icons';

const {Option} = Select;

export default function UpdateRefund() {
    const [refundNumber,setRefundNumber] = useState("")
    const [relatedCustomer,setRelatedCustomer] = useState("")
    const [relatedOrder,setRelatedOrder] = useState("")
    const [refundAmount,setRefundAmount] = useState("")
    const [refundMethod,setRefundMethod] = useState("")
    const [refundDate,setRefundDate] = useState("")
    const [approvalStatus,setApprovalStatus] = useState("")
    const [responsiblePerson,setResponsiblePerson] = useState("")

    const location = useLocation()
    let path = location.pathname;
    // let id = path.split('/')[3];
    let id = path.split('/').pop();

    const updateRefund = (e) =>{
        e.preventDefault();
        const refund = {refundNumber,relatedCustomer,relatedOrder,refundAmount, refundMethod, refundDate, approvalStatus,responsiblePerson};
        console.log(refund);
        RefundsService.updateRefund(id,refund).then(response=>{

        }).catch(error =>{
            console.log(error);
        })
    }
    useEffect(() =>{
        console.log("Fetching refund ID:", id); // 确认ID是否正确
        RefundsService.getRefundById(id).then(response =>{
            setRefundNumber(response.data.refundNumber);
            setRelatedCustomer(response.data.relatedCustomer);
            setRelatedOrder(response.data.relatedOrder);
            setRefundAmount(response.data.refundAmount);
            setRefundMethod(response.data.refundMethod);
            setRefundDate(response.data.refundDate);
            setApprovalStatus(response.data.approvalStatus);
            setResponsiblePerson(response.data.responsiblePerson);
        }).catch(error =>{
            console.log(error);
        })
    },[])
  return (
    <div className='UpdataRefund'>
        <div className="title" style={{ paddingBottom: '30px' }}>更新退款</div>
        <Form labelCol={{span: 5,}} wrapperCol={{span: 14,}} style={{marginLeft: '2%',}} layout="horizontal">
            <Form.Item label="退款编号" tooltip="What do you want others to call you?">
                <Input value={refundNumber} onChange={e => setRefundNumber(e.target.value)} />
            </Form.Item>

            <Form.Item label="关联客户">
                <Input value={relatedCustomer} onChange={e => setRelatedCustomer(e.target.value)} />
            </Form.Item>

            <Form.Item label="关联订单">
                <Input value={relatedOrder} onChange={e => setRelatedOrder(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            <Form.Item label="退款金额">
                <Input value={refundAmount} onChange={e => setRefundAmount(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            <Form.Item label="退款方式">
                <Input value={refundMethod} onChange={e => setRefundMethod(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            <Form.Item label="退款日期">
                <Input value={refundDate} onChange={e => setRefundDate(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            <Form.Item label="审批状态">
                <Input value={approvalStatus} onChange={e => setApprovalStatus(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            {/* <Form.Item label="审批状态" name="approvalStatus"
            rules={[{ required: true, message: '请选择审批状态!' }]}>
                <Select>
                    <Option value="pending">待审批</Option>
                    <Option value="approved">已通过</Option>
                    <Option value="denied">被否决</Option>
                    <Option value="rejected">被驳回</Option>
                    <Option value="revoked">已撤销</Option>
                </Select>
            </Form.Item> */}

            <Form.Item label="负责人员">
                <Input value={responsiblePerson} onChange={e => setResponsiblePerson(e.target.value)} suffix={<MailOutlined />} />
            </Form.Item>

            <Form.Item wrapperCol={{offset: 5, span: 16,}} style={{marginTop: '50px'}}>
                <Button type="primary" onClick={(e) => updateRefund(e)} htmlType="submit" icon={<CaretUpOutlined style={{ marginRight: "2px" }} />}>
                    <Link to='/refundlist' style={{ color: "white" }}>更新</Link>
                </Button>
                <Button type='danger' style={{ marginLeft: "25px" }} icon={<CloseCircleOutlined style={{ marginRight: "2px" }} />}>
                    <Link to='/refundlist' style={{ color: "white" }}>Close</Link>
                </Button>
            </Form.Item>
        </Form>
    </div>
  )
}
